<template>
  <el-dialog
    v-model="orderDetailEditDialogVisible"
    title="修改订单细项信息"
    width="40%"
    center
    @close="closeDialog(false)"
  >
    <el-form
      ref="validateForm"
      :model="orderDetailForm"
      :rules="rules"
      label-width="120px"
      :status-icon="true"
    >
       <el-form-item label="商品名称"  prop="productId">
        {{productName}} <el-button style="padding: 3px;margin-left:5px;" type="primary" size="mini"
                       @click="showPopPro()">选择 </el-button>
      </el-form-item> 
         <el-form-item label="商品型号">
        {{productCode}}
      </el-form-item> 
        <el-form-item label="商品单位">  {{productUnit}}
      </el-form-item>
       <el-form-item label="税率(%)" prop="productId">
        {{productTaxRate}}
      </el-form-item> 
       <el-form-item label="商品数量" prop="orderCount">
        <el-input-number v-model="orderDetailForm.orderCount" size="mini" :min="1" :max="10"  />
      </el-form-item>
     
      <el-form-item label="单价" prop="price">
        <el-input v-model="orderDetailForm.price" style="width:150px;" ></el-input>
      </el-form-item>
       <el-form-item label="金额" prop="amountPrice">
        <el-input v-model="orderDetailForm.amountPrice" style="width:150px;" ></el-input>（元）
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button
          @click="
            () => {
              closeDialog(false);
            }
          "
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { computed,onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { putRequest,getRequest } from "../../utils/api";

function orderDetailAdd(state, validateForm, emit) {
  const submitForm = () => {
    validateForm.value.validate((valid) => {
      if (valid) {
       
          putRequest("/order/basic/detail/", state.orderDetailForm).then((res) => {
          if (res && res.code == 200) {
            validateForm.value.resetFields();
            emit("onCloseEditOrderDetailVisible", false, res.data);
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
         
        
      }
    });
  };
  return { submitForm };
}

 

export default {
  components: {},
  props: {
    orderDetailId:String,
    orderDetailEditDialogVisible: Boolean
  },

  setup(props, { emit }) {
    const validateForm = ref();
    const state = reactive({
      orderDetailEditDialogVisible: props.orderDetailEditDialogVisible,
      productInfo:null,
      productName:computed(()=>{if(state.productInfo){return state.productInfo.name}else{return ''}}),
      productCode:computed(()=>{if(state.productInfo){return state.productInfo.code}else{return ''}}),
      productUnit:computed(()=>{if(state.productInfo){return state.productInfo.unitName}else{return ''}}),
       productTaxRate:computed(()=>{if(state.productInfo){return state.productInfo.taxRate}else{return ''}}),
      orderDetailDialogVisible: props.orderDetailDialogVisible,
      proPopDialogVisible:false ,
      orderNo:props.orderNo,
      orderDetailForm: {
        orderId:'',
        productId:computed(()=>{if(state.productInfo){return state.productInfo.id}else{return null}}),
        price :0,
          amountPrice:computed(()=>{
          if(!isNaN(state.orderDetailForm.price) && !isNaN(state.orderDetailForm.orderCount)){
              return parseFloat(parseFloat(state.orderDetailForm.price)*parseFloat(state.orderDetailForm.orderCount)).toFixed(2)
          }else{ 
              
            return 0}}),
        orderCount:1,
        actualCount: 0 ,//computed(()=>{return state.orderDetailForm.orderCount}),
        id:props.orderDetailId
      }
    });


    const rules = {
      orderId: [{ required: true, message: "订单信息未选中", trigger: "blur" }],
      productId: [{ required: true, message: "请选择商品", trigger: "blur" }],
      orderCount: [{ required: true, message: "填写订单数量", trigger: "blur" }]
 
    };

    const closeDialog = (visible, data) => {
      validateForm.value.resetFields();
      emit("onCloseEditOrderDetailVisible", visible, data);
    };
   
    const loadVisitData = ()=>{
         getRequest("/order/basic/detail/one", { id: state.orderDetailForm.id }).then((res) => {
            if (res && res.code == 200) {
            state.orderDetailForm = res.data;
            state.productInfo =  res.data.product ;
            } else {
            ElMessage({
                type: "error",
                title: "失败",
                message: "查询失败",
                duration: 2000,
            });
            }

     
        });
    }
    onMounted(()=>{
      loadVisitData()
    })
    return {
      ...toRefs(state),
      closeDialog,
      rules,
      ...orderDetailAdd(state, validateForm, emit), 
      validateForm
   
    };
  },
};
</script>

<style>

.el-input-number__increase{
  margin-top:1px;
}

.el-input-number__decrease{
  margin-top:1px;
}


.el-form-item__error {
  padding-top: 0px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>